<template>
	<div id="category-app">

		<div class="cat-search">

			<form action="javascript:void(0);" onsubmit="searchGoods();">
				<i class="fa fa-search"></i>
				<input type="search" id="keyword" name="kw" placeholder="商品" autocomplete="off">
			</form>

		</div>
		<div class="flex">
			<ul class="category">
				<template v-for="(cat,index) in catList">
					<li v-bind:class="{ 'cur-category': curCat==cat.id}" @click="CatClick(cat.id,index);">{{cat.title}}</li>
				</template>
			</ul>
			<div class="cat-child">
				<template v-for="(value, index) in catList">
					<h4 v-bind:data-index="index">{{value.title}}</h4>
					<div class="cat-child-item">
						<div @click="$router.push({path:'GoodsList', query: {catid: value.Id}})" class='item'>
							<img src="https://img10.360buyimg.com/babel/s170x180_jfs/t1/41213/17/1241/53361/5cc5662dE014142ad/b7ee955eec24b8c8.jpg!q90!cc_170x180" />
							<p>二级分类</p>
						</div>
						<div @click="$router.push({path:'GoodsList', query: {catid: value.Id}})" class='item'>
							<img src="https://img13.360buyimg.com/babel/s170x180_jfs/t1/33285/37/8366/22892/5cc58affEdf9d8a61/8ccdf051b980ae45.jpg!q90!cc_170x180" />
							<p>二级分类</p>
						</div>
						<div @click="$router.push({path:'GoodsList', query: {catid: value.Id}})" class='item'>
							<img src="https://img11.360buyimg.com/babel/s170x180_jfs/t1/36981/10/1214/66949/5cb03c6fE5c20ba92/329347982c2973cc.jpg!q90!cc_170x180" />
							<p>二级分类</p>
						</div>

						<div @click="$router.push({path:'GoodsList', query: {catid: value.Id}})" class='item'>
							<img src="https://img10.360buyimg.com/babel/s170x180_jfs/t1/41213/17/1241/53361/5cc5662dE014142ad/b7ee955eec24b8c8.jpg!q90!cc_170x180" />
							<p>二级分类</p>
						</div>
						<div @click="$router.push({path:'GoodsList', query: {catid: value.Id}})" class='item'>
							<img src="https://img13.360buyimg.com/babel/s170x180_jfs/t1/33285/37/8366/22892/5cc58affEdf9d8a61/8ccdf051b980ae45.jpg!q90!cc_170x180" />
							<p>二级分类</p>
						</div>
						<div @click="$router.push({path:'GoodsList', query: {catid: value.Id}})" class='item'>
							<img src="https://img11.360buyimg.com/babel/s170x180_jfs/t1/36981/10/1214/66949/5cb03c6fE5c20ba92/329347982c2973cc.jpg!q90!cc_170x180" />
							<p>二级分类</p>
						</div>
					</div>
				</template>
			</div>
		</div>


		<Footer></Footer>
	</div>
</template>

<script>
	import Footer from "@/components/common/_footer.vue"
	export default {
		data() {
			return {
				catList: [],
				curCat: 1
			}
		},
		components: {
			Footer
		},
		beforeCreate: function() {
			//组件实例刚刚被创建，但组件属性尚未
			//alert(config.ApiUrl);

		},
		created: function() {
			// 			var catTitle = ['手机数码', '电脑办公', '家用电器', '数码摄影', '奢侈品', '女装内衣', '男鞋女鞋', '智能家居', '运动户外', '珠宝饰品', '家居建材', '母婴用品',
			// 				'童装童鞋', '家居厨卫', '瓜果蔬菜'
			// 			];
			// 			for (var i = 0; i < catTitle.length; i++) {
			// 				this.catList.push({
			// 					"Id": i + 1,
			// 					"Title": catTitle[i]
			// 				});
			// 			}
			this.$http.post(config.ApiUrl + 'product/CategoryList', {}, {
				emulateJSON: true
			}).then(function(res) {
				console.log(res.body.data);
				this.catList = res.body.data;
				this.curCat=this.catList[0].id;
				console.log(this.catList);
				//this.article = res.body.data;
			}, function(res) {
				//console.log('失败')
			});
		},
		mounted: function() {
			let self = this;
			//document.getElementsByClassName("router-link-active")[0].classList.add("red");
			document.querySelectorAll(".aui-slide-item-item").forEach(function(v) {
				v.addEventListener('click', () => {
					console.log(self);
					self.$router.push('/GoodsDetail')
				})
			});
			document.querySelectorAll(".aui-list-product-item").forEach(function(v) {
				v.addEventListener('click', () => {
					console.log(self);
					self.$router.push('/GoodsDetail')
				})
			});
		},
		methods: {
			CatClick: function(id, index) {
				this.curCat = id;
				var s = 0;
				// || window.pageYOffset || document.body.scrollTop;
				var nowScroll = document.querySelectorAll(".cat-child")[0].scrollTop;
				var elementTop = document.querySelectorAll(".cat-child h4")[index].offsetTop;;
				var s = Math.abs(elementTop - nowScroll);
				if (nowScroll < elementTop) {
					s -= 50;
				} else {
					s += 50;
				}
				var speed = parseInt(s / 10);
				var i = 0;
				var timer = setInterval(function() {
					if (nowScroll < elementTop) {
						document.querySelectorAll(".cat-child")[0].scrollTop += speed;
					} else {
						document.querySelectorAll(".cat-child")[0].scrollTop -= speed;
					}
					i++;
					if (i == 10) {
						clearInterval(timer);
					}
				}, 30);
			}
		}
	}
</script>

<style>
	.cat-search {
		background-color: #fff;
		padding: .5rem;
		text-align: center;
		position: relative;
	}

	.cat-search i {
		position: absolute;
		left: 6%;
		font-size: 1.4rem;
		color: #999;
		top: 30%;
	}

	.cat-search input {
		background-color: #f9f9f9;
		border-radius: 15px;
		font-size: 14px;
		padding: 8px 0;
		color: #110707;
		-webkit-appearance: none;
		text-indent: 8%;
		height: 34px;
		line-height: 20px;
		width: 95%;
		margin: auto;
		vertical-align: middle;
		outline: none;
	}
</style>
